<template>
  <div class="storeproductreply-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="时间选择：" class="width100">
        <a-radio-group v-model:value="searchParams.dateLimit" button-style="solid" class="mr20"
          @change="selectChange(searchParams.dateLimit)">
          <a-radio-button v-for="(item, i) in DAYS_TYPE" :key="i" :value="item.value">
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker v-model:value="timeVal" value-format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="评价状态：">
        <a-select v-model:value="searchParams.isReply" placeholder="请选择" clearable>
          <a-select-option value="1">已回复</a-select-option>
          <a-select-option value="0">未回复</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="商品搜索：">
        <a-input v-model:value="searchParams.productSearch" placeholder="请输入商品名称" clearable />
      </a-form-item>
      <a-form-item label="用户名称：">
        <a-input v-model:value="searchParams.nickname" clearable />
      </a-form-item>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()">添加虚拟评论</add-button>
    </div>
    <g-table ref="tableRef" :columns="columns" :api="getPageList" :params="searchParams" />
    <a-modal v-model:visible="open" title="回复内容" :width="700" @ok="handleOk">
      <a-textarea v-model:value="content" placeholder="请输入回复内容" :auto-size="{ minRows: 2 }" />
    </a-modal>
    <storeproductreplyDetail v-model:visible="visible" :data="activeRow" @change="search(false)" />
  </div>
</template>

<script setup lang="tsx">
import { storeproductreplyDel, getPageList, replyCommentApi } from './api';
import type { Istoreproductreply } from './entity';
import storeproductreplyDetail from './detail.vue';
import { DAYS_TYPE } from "@/utils/constant";
import { identity } from 'lodash-es';
const searchParams = reactive({
  prop: "",
  nickname: "",
  productSearch: "",
  dateLimit: "",
  date: "",
  isReply: ''
});
let timeVal = $ref<string[]>(["", ""]);
let visible = $ref(false)
let open = $ref(false)
let content = $ref('')
let curId = $ref('')
const { tableRef, columns, search } = useTable<Istoreproductreply>([
  {
    title: "商品信息",
    dataIndex: "storeProduct",
    customRender: ({ record }) =>
      record.storeProduct ? <> <img class="img-thumbnail" src={record.storeProduct.image} /> <div class="info">{record.storeProduct.storeName}</div></> : "",
  },
  { title: '用户名称', dataIndex: 'uinicknamed' },
  { title: '商品评分', dataIndex: 'productScore' },
  { title: '服务评分', dataIndex: 'serviceScore' },
  {
    title: '评价内容', dataIndex: 'comment',
    customRender: ({ record }) =>
      <>
        <div class="mb5 content_font">{record.comment}</div>
        <template v-if={record.pics.length && record.pics[0]}>
          <div class="demo-image__preview">
            {
              record.pics.map((e: string, i: number) => {
                <img
                  src={e}
                  class='mr5'
                  key={i}
                />
              })
            }

          </div>
        </template>
      </>

  },
  { title: '回复内容', dataIndex: 'merchantReplyContent' },
  { title: '评价时间', dataIndex: 'createTime' },
  {
    title: '操作',
    dataIndex: 'op',
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => reply(record.id)}>回复</table-button>
        <confirm-button danger onClick={() => remove(record)}>删除</confirm-button>
      </>
    )
  }
])
function reply(id: string) {
  curId = id
  open = true
}

async function handleOk() {
  if (!content) {
    AntMessage.success('请填写评论')
  }
  await replyCommentApi({ ids: curId, merchantReplyContent: content })
  AntMessage.success('回复成功')
  open = false
  search(false)
}
// 选择时间
function selectChange(tab: string) {
  searchParams.date = tab;
  timeVal = [];
  search(false);
}
let activeRow = $ref<Partial<Istoreproductreply>>({})
function add(row: Partial<Istoreproductreply> = {}) {
  activeRow = { ...row }
  visible = true
}

function remove({ id }: Istoreproductreply) {
  storeproductreplyDel(id).then(() => {
    AntMessage.success('已删除')
    search(false)
  })
}
</script>

<style lang="scss"></style>